import './index.scss'
/**
 * 创建新组件之后，在all-can-use-components中添加
 * 必须应用 microCreateMinis
 * 数据必须以formData包含
 * */
import '../../directive/index'
import { microCreateMinis } from '../../minis'
import { SlickList, SlickItem, HandleDirective } from 'vue-slicksort'
import draggable from 'vuedraggable'
import { newGetMicroPageCompotentDetail } from '../../../../../../../api/shoppingMall/feature'

/** 店铺信息*/
export default {
  name: 'micro-shop-box',
  mixins: [microCreateMinis],
  directives: { handle: HandleDirective },
  data() {
    return {
      tabList: [
        {
          icon: 'el-icon-bank-card',
          title: '样式一'
        },
        {
          icon: 'el-icon-bank-card',
          title: '样式一'
        },
        {
          icon: 'el-icon-bank-card',
          title: '样式一'
        },
        {
          icon: 'el-icon-bank-card',
          title: '样式一'
        },
        // {
        //   icon: 'el-icon-bank-card',
        //   title: '样式一'
        // }
      ],
      formData: {
        indicator: 1, // 选择模板:
        name:'', // 店铺名称
        fontColor: '#fff', // 文字颜色
        mantle: true, // 背景蒙层
        marginTop: 0,
        marginBottom: 0,
        position:'0', // 店铺位置
        positionName:'',
        follow:'0', // 店铺关注
        navigation:'0', // 位置导航
        isPhone:'0', // 客服电话
        phone:'',
        msg:'0', // 店铺消息
        bg:'0', // 店铺背景
        bgColor1:'',
        bgColor:'#fff',
        bgImage:'',
        imageLogo:'',
        shopId:'',
        formatIdName:''
      },
      isGetChooseFeature: false, // 是否可以返回微页面
      dialogChoosePages: false, // 自定义页面弹窗
      commonCheckFieldRules: 'checkData', // 当前组件默认的规则判断函数
      mySelfCheckRules: 'mySelfCheckFun', // 我自己的验证规则函数  比如弹窗之类的
      hotScale: 392 / 500,
      dialogHot: false, // 是否显示热区
      dialogChooseGoods: false, // 选择商品
      isGetChooseData: false, // 开始返会商品
      cacheImage: false, // 是否是正在编辑热区的
      /** 选择图片的弹窗*/
      dialogChooseImgVisible: false, // 显示选择图片
      isGetChooseImages: false, // 返回图片
      canChooseImagesNum: 1, // 可以添加的图片数量
      // isChangeImg: false, // 是否为更换图片模式
      currentEditIndex: 0, // 当前编辑的图片
      currentHotEditIndex: 0, // 当前编辑的热区
      settingActive: 0,
      indicator_d_active: 1,
    }
  },
  watch: {
  },
  components: {
    draggable,
    chooseImages: () => import('@/components/new-choose-images/index.vue'),
    chooseSh: () => import('@/components/activity_choose_sh/activity_choose_sh.vue'),
  },
  computed: {},
  mounted() {
  },
  methods: {
    indicatorChange(val){
      if(val === 3){
        this.formData.fontColor = '#000'
      }else{
        this.formData.fontColor = '#fff'
      }
    },
    choosePage(index) {
      console.log('index==', index)
      this.currentEditIndex = index
      this.dialogChoosePages = true
    },
    chooseChooseFeaturesFun($event) {
      console.log('$event', $event)
      const microTitle = $event.data.type === 0 && '系统页面' || $event.data.type === 1 && '功能页面' || $event.data.type === 2 && '商品详情'
      || $event.data.type === 3 && '商品活动'
      if ($event.data.type === 0) {
        this.setLinkInfo({
          id: $event.data.id,
          type: $event.data.type,
          title: $event.data.title,
          link: $event.data.path,
          microTitle: microTitle
        })
        console.log('$event.data', $event.data.type)
      } else if ($event.data.type === 3){
        this.setLinkInfo({
          activityId: $event.data.id,
          channel: '2',
          goodsId: $event.data.campaignVO.goodsId,
          type: $event.data.type,
          title: $event.data.title,
          link: $event.data.path,
          microTitle: microTitle
        })
      } else {
        this.setLinkInfo({
          id: $event.data.id,
          type: $event.data.type,
          title: $event.data.title,
          link: $event.data.id,
          microTitle: microTitle
        })
      }
      this.dialogChoosePages = false
    },
    getPicsUrl(arr) {
      // console.log('arr', arr)
    },
    sweiperChange_a(val) {
      this.indicator_d_active = val + 1
    },
    /** 更换图片*/
    changeImg(index) {
      this.currentEditIndex = index
      if(index === 1){
        this.$refs.chooseShs.dialogMMCVisible = true
      }else{
      // this.isChangeImg = true
        this.$refs.pics.dialog = true
        this.canChooseImagesNum = 1
      }
    },
    chooseShEnd(row){
      // this.formData.imageLogo = row.logo
      this.formData.name = row.name
      this.formData.shopId = row.id
      this.formData.formatIdName = row.formatIdName
      this.geteCompotentDetail()
    },
    geteCompotentDetail(){
      newGetMicroPageCompotentDetail({
        type:'shop',
        dataField:this.formData
      }).then(res =>{
        this.formData.imageLogo = res.items[0].logo
        this.formData.name = res.items[0].name
        this.formData.positionName = res.items[0].shopStoreDesc
        this.formData.phone = res.items[0].customerServiceTelephone

      })
    },
    /** choose图片的回调*/
    chooseImagesEnd($item) {
      const $imgData = $item.data
      this.dialogChooseImgVisible = false
      if(this.currentEditIndex == 1){   // 添加logo
        this.formData.imageLogo = $imgData[0]
      }else{
        this.formData.bgImage = $imgData[0]
      }
    },
    /** 设置跳转信息*/
    setLinkInfo(obj) {
      console.log('obj', obj)
      // if (this.isCacheImage) { // 热区弹窗编辑模式
      //   this.cacheImageActiveBox[this.currentHotEditIndex].title = obj.title
      //   this.cacheImageActiveBox[this.currentHotEditIndex].link = obj.link
      //   this.cacheImageActiveBox[this.currentHotEditIndex].type = this.commandInfo.type
      //   this.$forceUpdate()
      //   return
      // }
      // if (this.formData.indicator === 4) { // 热区非弹窗编辑模式
      //   this.formData.imageList[this.currentEditIndex].activeBoxs[this.currentHotEditIndex].title = obj.title
      //   this.formData.imageList[this.currentEditIndex].activeBoxs[this.currentHotEditIndex].link = obj.link
      //   this.formData.imageList[this.currentEditIndex].activeBoxs[this.currentHotEditIndex].type = this.commandInfo.type
      // } else {
      //   if(obj.type !== 3){
      //     this.formData.imageList[this.currentEditIndex].microTitle = obj.title
      //     this.formData.imageList[this.currentEditIndex].link = obj.link
      //     this.formData.imageList[this.currentEditIndex].type = obj.type
      //     this.formData.imageList[this.currentEditIndex].microType = obj.microTitle
      //   }else{
      //     this.formData.imageList[this.currentEditIndex].microTitle = obj.title
      //     this.formData.imageList[this.currentEditIndex].link = obj.link
      //     this.formData.imageList[this.currentEditIndex].type = obj.type
      //     this.formData.imageList[this.currentEditIndex].microType = obj.microTitle
      //     this.formData.imageList[this.currentEditIndex].activityId = obj.activityId
      //     this.formData.imageList[this.currentEditIndex].goodsId = obj.goodsId
      //     this.formData.imageList[this.currentEditIndex].channel = obj.channel
      //   }

      // }
      this.$forceUpdate()
    },
    /** 选择跳转路径*/
    command(eve) {
      // this.isCacheImage = eve.isCacheImage || false
      // this.commandInfo = eve.linkItem
      // console.log('eve', eve)
      // console.log('this.commandInfo', this.commandInfo)
      // /* eslint-disable */
      // if (eve.hasOwnProperty('currentHotEditIndex')) {
      //   this.currentHotEditIndex = eve.currentHotEditIndex
      // }
      // if (eve.hasOwnProperty('currentEditIndex')) {
      //   this.currentEditIndex = eve.currentEditIndex
      // }
      // /* eslint-enable */
      // if (eve.linkItem.type === 1) {
      //   this.dialogChooseGoods = true
      //   return
      // }
      // if (eve.linkItem.type === 4) {
      //   this.dialogChoosePages = true
      //   return
      // }
      // this.setLinkInfo({
      //   title: this.commandInfo.title,
      //   link: this.commandInfo.link
      // })
    },
    /* 校验*/
    checkData() {
      // if (this.formData.imageList.length) {
      //   this.formData.imageList.map(res => {
      //     if (Number(this.formData.indicator) === 4) { // 切换为热区模式，清空link title type
      //       res.link = ''
      //       res.title = ''
      //       res.type = ''
      //     } else { // 非热区模式
      //       res.activeBoxs = []
      //     }
      //   })
      //   this.formData.imageList = [];
      // }
      const isPass = ( this.formData.bgImage !='' &&  this.formData.imageLogo !='' )
      this.myCheckResult(isPass)
    },
    // 弹出哪个没有填写的
    mySelfCheckFun() {
      if( this.formData.bgImage =='' ||  this.formData.imageLogo =='' ){
        this.$message.error('请添加图片！')
      }
    }
  }
}
